<script setup>
    import { sdCityList } from '@/utils/index'
    
    // 列表
    let resData = $ref([])

    // 总条数
    let totalCount = $ref(0)

    // 筛选
    let filterParams = $ref({
        pageNo: 1,
        pageSize: 20,
    })

    // 列表数据加载中
    let dataLoading = $ref(false)


    const getList = () => {
        dataLoading = true

        setTimeout(() => {
            dataLoading = false
            let data = { s1: '张文明', s2: '男', s3: '枣庄市',  s4: '370481********8765', s5: '脱贫享受政策人员', s6: '城镇', s7: '山林防护', s8: '8', s9: '1200' }
            resData = [
            { s1: '郝汝鑫', s2: '男', s3: '枣庄市', s4: '370403********872X', s5: '就业困难的失业人员',  s6: '城镇', s7: '社区网格员', s8: '8', s9: '1200' },
            { s1: '李忠林', s2: '男', s3: '枣庄市', s4: '370403********2635', s5: '就业困难的失业人员',  s6: '城镇', s7: '社区网格员', s8: '8', s9: '1200' },
            { s1: '刘瑞辰', s2: '男', s3: '枣庄市', s4: '370403********0525', s5: '就业困难的失业人员',  s6: '城镇', s7: '社区网格员', s8: '8', s9: '1200' },
            { s1: '张新建', s2: '男', s3: '枣庄市', s4: '370403********4796', s5: '就业困难的失业人员',  s6: '城镇', s7: '社区网格员', s8: '8', s9: '1200' },
            ]
            for(let i = 0; i < filterParams.pageSize - 4; i++){
                resData.push(data)
            }
            totalCount = 1546
        }, 300);
    }
    getList()

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 搜索
    const hadleSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        filterParams = {
            pageNo: 1,
            pageSize: 20
        }
    }

    let detailsData = $ref({})

    let showDetails = $ref(false)

    let portrayalBottomTag = ['一、公告', '二、申请', '三、评议', '四、公示', '五、审批', '六、培训', '七、上岗', '八、退出']

    let dialogVisible = $ref(false)
    
    let memberDetails = [
    {
        "id": "1581287881320776695",
        "createBy": "admin",
        "createTime": "2022-10-15 22:17:26",
        "updateBy": null,
        "updateTime": null,
        "sysOrgCode": "A01",
        "dwName": "西集镇人民政府",
        "gygName": "村容保洁",
        "name": "李*",
        "idCard": "370406*********526",
        "tcType": "1",
        "type": "4",
        "v1": "202207",
        "v2": "202206",
        "v3": "202206",
        "v4": "1",
        "v5": "800",
        "v6": "0",
        "v7": "0",
        "v8": "0",
        "v9": "0",
        "v10": "0",
        "v11": "0",
        "v12": "0",
        "v13": "0",
        "v14": "800",
        "tcType_dictText": "乡村",
        "type_dictText": "农村大龄人员（45-65周岁）"
    },
    {
        "id": "1581287881417245548",
        "createBy": "admin",
        "createTime": "2022-10-15 22:17:48",
        "updateBy": null,
        "updateTime": null,
        "sysOrgCode": "A01",
        "dwName": "西集镇人民政府",
        "gygName": "村容保洁",
        "name": "李*",
        "idCard": "370406*********526",
        "tcType": "1",
        "type": "4",
        "v1": "202207",
        "v2": "202203",
        "v3": "202205",
        "v4": "3",
        "v5": "2400",
        "v6": "0",
        "v7": "0",
        "v8": "0",
        "v9": "0",
        "v10": "0",
        "v11": "0",
        "v12": "0",
        "v13": "0",
        "v14": "2400",
        "tcType_dictText": "乡村",
        "type_dictText": "农村大龄人员（45-65周岁）"
    }
]

</script>

<template>
    <div class="title-text">精准查询</div>
    <div class="health-search">
        <div class="health-search-form-warp dz-filter-wrap">
            <el-form 
                :model="filterParams" 
                :inline="true"
                :label-width="105"
                class="mt10"
            >
                <el-form-item label="所属市">
                    <el-select v-model="filterParams.sysOrgCode" placeholder=" " clearable @clear="delete filterParams.sysOrgCode">
                        <el-option
                            v-for="(item, index) in sdCityList"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="filterParams.name"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="filterParams.idCard"></el-input>
                </el-form-item>
                <el-form-item label="人员类别">
                    <el-select v-model="filterParams.s5" placeholder=" " clearable @clear="delete filterParams.s6">
                        <el-option
                            v-for="(item, index) in ['脱贫享受政策人员', '乡村残疾人', '低收入人员', '零就业家庭人员', '乡村大龄人员']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公益性类别">
                    <el-select v-model="filterParams.s6" placeholder=" " clearable @clear="delete filterParams.s6">
                        <el-option
                            v-for="(item, index) in ['城镇', '乡村']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>

                <div class="btn-wrap flex-center">
                    <div class="btn reset" @click="handleClickReset">重置</div>
                    <div class="btn search" @click="hadleSearch">查询</div>
                </div>
            </el-form>

        </div>

        <!-- 查询结果 -->
        <div class="search-result mt10" v-loading="dataLoading">
            <div class="result-title flex-between">
                <div>
                    查询结果
                    <span class="result-count">共{{ totalCount }}条</span>
                </div>
            </div>
            
            <el-table 
                :data="resData" 
                style="width: 100%"
                height="530"
                size="large"
                class="dz-table"
                :scrollbar-always-on="true"
            >
                <el-table-column type="index" label="序号" min-width="60" align="center" />
                <el-table-column prop="s1" label="姓名" min-width="90" align="center" />
                <el-table-column prop="s2" label="性别" min-width="90" align="center" />
                <el-table-column prop="s3" label="所属市" min-width="100" align="center" />
                <el-table-column prop="s4" label="身份证号码" min-width="160" />
                <el-table-column prop="s5" label="人员类别" min-width="160" />
                <el-table-column prop="s6" label="公益性类别" min-width="120" />
                <el-table-column prop="s7" label="工作内容" min-width="160" />
                <el-table-column prop="s8" label="考核分" min-width="90" align="center" />
                <el-table-column prop="s9" label="补贴金额" min-width="100" align="center" />
                <el-table-column prop="v6" label="操作" min-width="200" align="center">
                    <template #default="scope">
                        <div class="table-operation flex-center">
                            <span @click="detailsData = scope.row; showDetails=true">人物画像</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination 
                class="mt20" 
                background 
                layout="total, sizes, prev, pager, next" 
                :total="totalCount" 
                :page-size="filterParams.pageSize"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />

        </div>
    </div>

 <!-- 人物画像 -->
 <div class="member-details" v-if="showDetails">
        <div class="close" @click="showDetails = false"><img src="../../../assets/images/eleFile/close.png" alt=""></div>
        <div class="dialog-info-title">人物画像</div>
        <div class="flex">
            <div class="left-info">
                <div class="info-title">
                    基本信息
                </div>
                <div class="info-list-wrap">
                    <p>姓名：{{ detailsData.s1 }}</p>
                    <p>民族：汉</p>
                    <p>所属区/市：枣庄市</p>
                    <p>身份证号：{{ detailsData.s4 }}</p>
                    <p>手机号：182****9009</p>
                    <p>总补贴金额：￥3424
                        <span 
                            class="detail-text" 
                            @click="dialogVisible=true"
                        >
                            详情
                        </span>
                    </p>
                    <p>合同开始时间：2022-02-02</p>
                    <p>合同结束时间：2025-02-02</p>
                    <p>户籍地：山东省枣庄市</p>
                    <!-- <p>单位类型：用岗单位</p> -->
                </div>
            </div>
            <div class="right-tag">
                <div class="tag flex-center">{{ detailsData.s7 }}</div>
                <div class="tag flex-center">{{ detailsData.s1 }}</div>
                <div class="tag flex-center">男</div>
                <div class="tag flex-center">城镇</div>
                <div class="tag flex-center">群众</div>
                <div class="tag flex-center">枣庄市</div>
                <div class="tag flex-center">{{ detailsData.s5 }}</div>
                <div class="tag flex-center">考核分: 100分</div>
                <div class="tag flex-center">补贴金额: ￥1200</div>
            </div>
        </div>

        <div class="details-b-tag flex-center">
            <div 
                v-for="(item, index) in portrayalBottomTag" 
                :key="index"
                class="tag-item"
            >
                {{ item }}
            </div>
        </div>

    </div>


     <!-- 补贴详情 -->
     <el-dialog
        v-model="dialogVisible"
        width="1450px"
    >
        <el-table 
            :data="memberDetails" 
            style="width: 100%"
            height="550"
            size="large"
        >
            <el-table-column type="index" label="序号" min-width="60" align="center" />
            <el-table-column prop="v1" label="申请月份" min-width="80" align="center" />
            <el-table-column prop="v2" label="补贴开始年月" min-width="80" align="center" />
            <el-table-column prop="v3" label="补贴结束年月" min-width="80" align="center" />
            <el-table-column prop="v4" label="本次申请月数" min-width="80" align="center" />
            <el-table-column prop="v5" label="岗位补贴金额" min-width="80" align="center" />
            <el-table-column prop="v6" label="养老金额" min-width="80" align="center" />
            <el-table-column prop="v7" label="医疗金额" min-width="80" align="center" />
            <el-table-column prop="v8" label="失业金额" min-width="80" align="center" />
            <el-table-column prop="v9" label="工伤金额" min-width="80" align="center" />
            <el-table-column prop="v10" label="生育金额" min-width="80" align="center" />
            <el-table-column prop="v11" label="大额金额" min-width="80" align="center" />
            <el-table-column prop="v12" label="社保补贴金额" min-width="80" align="center" />
            <el-table-column prop="v13" label="意外伤害险补贴金额" min-width="80" align="center" />
            <el-table-column prop="v14" label="总金额" min-width="80" align="center" />
        </el-table>
    </el-dialog>


</template>

<style lang="less" scoped>
    .member-details{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1296px;
        height: 836px;
        background:  url('../../../assets/images/eleFile/member-03.png') center no-repeat;
        margin-top: -418px;
        margin-left: -600px;
        z-index: 99;
        padding: 0 90px;

        .close{
            position: absolute;
            right: 40px;
            top: 20px;
            cursor: pointer;
        }

        .dialog-info-title{
            font-size: 24px;
            color: #fff;;   
            font-weight: bold;
            padding-top: 60px;
        }

        .left-info{
            margin-top: 50px;
            width: 354px;
            height: 556px;
            background: url('../../../assets/images/eleFile/member-02.png') center no-repeat;

            .info-title{
                padding: 17px 0;
                color: #fff;
                font-size: 18px;
                text-align: center;
            }

            .info-list-wrap{
                padding: 0 30px;
                position: relative;

                p{
                    color: #fff;
                    font-size: 18px;
                    padding-top: 28px;
                    display: flex;

                    .detail-text{
                        display: inline-block;
                        width: 62px;
                        line-height: 27px;
                        border-radius: 4px;
                        background: #DF9500;
                        text-align: center;
                        margin-left: 10px;
                        cursor: pointer;
                        vertical-align: top;
                        margin-top: -3px;
                    }
                }

                .photo{
                    position: absolute;
                    top: 5px;
                    right: 20px;
                    width: 112px;
                    height: 112px;
                }
            }
        }

        .right-tag{
            width: 602px;
            height: 716px;
            margin-left: 100px;
            // background: url('../../assets/images/eleFile/member-01.png') center no-repeat;
            position: relative;

            .tag{
                width: 171px;
                height: 56px;
                line-height: 56px;
                background: url('../../../assets/images/eleFile/tag-bg.png') center no-repeat;
                position: absolute;
                top: 80px;
                left: 32px;
                font-size: 20px;
                color: #00FFFF;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: block;
                text-align: center;

                &:nth-child(2){
                    top: 131px;
                    left: 450px;
                }

                &:nth-child(3){
                    top: 248px;
                    left: 38px;
                }

                &:nth-child(4){
                    top: 200px;
                    left: 412px;
                }

                &:nth-child(5){
                    top: 321px;
                    left: -56px;
                }

                &:nth-child(6){
                    top: 283px;
                    left: 523px;
                }

                &:nth-child(7){
                    top: 420px;
                    left: 2px;
                }

                &:nth-child(8){
                    top: 421px;
                    left: 459px;
                }

                &:nth-child(9){
                    top: 564px;
                    left: 31px;
                }

                &:nth-child(10){
                    top: 589px;
                    left: 376px;
                }
                
            }
        }

        .details-b-tag{
            position: absolute;
            bottom: 70px;

            .tag-item{
                width: 159px;
                height: 52px;
                line-height: 52px;
                margin-left: -15px;
                text-align: center;
                color: #fff;
                font-size: 18px;
                background: url('../../../assets/images/eleFile/portrayal-b-tag-2.png') center no-repeat;

                &:nth-child(1){
                    background: url('../../../assets/images/eleFile/portrayal-b-tag-1.png') center no-repeat;
                }

                &:nth-child(8){
                    background: url('../../../assets/images/eleFile/portrayal-b-tag-3.png') center no-repeat;
                }
            }
        }
    }
</style>



